<template>
  <div class="editorTree">

    <!-- 编辑对话框 -->
    <EditorDeviceEdit ref="editDialog" v-on:refreshDevice="refreshDevice"/>

    <el-table
      ref="deviceTable"
      :data="deviceList"
      highlight-current-row
      @current-change="handleCurrentChange"
      border>
      <el-table-column
        prop="name"
        label="请选择设备">
      </el-table-column>
      <el-table-column
        align='center'
        prop="opt"
        label="操作"
        width="60">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="onEditDevice(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top: 30px;">
      <el-button style="width:90%" type="success" round
        @click="onNewDevice">增加一个新设备</el-button>
    </div>
  </div>
</template>

<style>
</style>

<script>
import EditorDeviceEdit from './EditorDeviceEdit'
export default {
  components: {
    'EditorDeviceEdit': EditorDeviceEdit
  },
  data () {
    return {
      deviceList: []
    }
  },
  mounted: function () {
    this.loadDevices()
  },
  methods: {
    loadDevices () {
      this.$http.get('/func/loadDevices').then((res) => {
        if (res.status === 200) {
          this.deviceList = res.body
          this.$refs.deviceTable.setCurrentRow(this.deviceList[0])
        }
      })
    },
    handleCurrentChange (select) {
      this.$emit('onDeviceSelect', select)
    },
    onEditDevice (deviceId) {
      this.$refs.editDialog.openEdit(deviceId)
    },
    onNewDevice () {
      this.$refs.editDialog.openEdit(null)
    },
    refreshDevice () {
      this.loadDevices()
    }
  }
}
</script>
